import './List.scss'
import ContextTodo,{state} from "../store/contextTodo"
import { useContext,useState } from 'react';

const List = () => {
    const context=useContext(ContextTodo)
    return (<>
        <div className='list'>
            <h1>列表</h1>
            <table  cellSpacing={0}>
                <thead>
                    <tr>
                        <td>标题</td>
                        <td>日期</td>
                        <td>优先级</td>
                        <td>删除</td>
                    </tr>
                </thead>
                <tbody>
                    {
                        context.todoList.map((item, index) =>
                            <tr key={index}>
                                <td>{item.title}</td>
                                <td>{item.date}</td>
                                <td style={item.priority==='1'? {color:'red'} : (item.priority==='2'?{color:'blue'}:{color:'green'})}>{item.priority}</td>
                               <td onClick={()=>context.del(index)}>删除</td>
                            </tr>)
                    }
                </tbody>
            </table>
        </div>
    </>
    );
}

export default List;